<template>
  <div>
    <h2>{{ mm }}</h2>
    <h2>{{ pp }}</h2>
    <h2>{{ person.name }}</h2>
    <h2>{{ person.age }}</h2>
    <h2>{{ person.title }}</h2>
    <h2>{{ person.subject.lesson }}</h2>
    <h2>{{ person.subject.scores.firstCode }}</h2>
    <h2>{{ person.subject.scores.secondCode }}</h2>
    <button @click="changeStatus">改变值的状态</button>
  </div>
</template>
<script>
import { ref, reactive, watch } from "vue";

export default {
  name: "Test",
  setup() {
    let mm = ref("xfsss");
    let pp = ref("oooo");

    const person = reactive({
      name: "xfj",
      age: 26,
      title: "小芳",
      subject: {
        lesson: "数学",
        scores: {
          firstCode: 38,
          secondCode: 98,
        },
      },
    });

    function changeStatus() {
      person.name = "lzj";
      person.age = "27";
      person.title = "大笨蛋";
      person.subject.lesson = "物理";
      person.subject.scores.firstCode = 12;
      person.subject.scores.secondCode = 222;

      mm.value = "xxxx";
      pp.value = "llll";
    }

    //检测ref值的变更 单个的情况
    // watch(mm, (newvalue, oldvalue) => {
    //   console.log("mm的值改变了", newvalue, oldvalue);
    // });

    //检测ref值的变更 多个的情况
    // watch([mm,pp], (newvalue, oldvalue) => {
    //   console.log("mm的值改变了", newvalue, oldvalue);
    // });

    //person 里面的所有属性都会被检测到，无论包了多少层
    //并且关闭 深度监视也没有意义，因为这个是强制的
    //这里的oldvalue是有问题的 输出的也是newvalue 不存在oldvalue 到现在还没有解决 注意一下
    // watch(person, (newvalue, oldvalue) => {
    //   console.log("mm的值改变了", newvalue, oldvalue);
    // },{deep:false});

    //单独监视 person里的 属性  多个情况需要包一个中括号
    // watch([()=> person.name,()=> person.age], (newvalue, oldvalue) => {
    //   console.log("name的值改变了", newvalue, oldvalue);
    // });

    //特殊情况   如果是reactive 里的对象需要单独监视的话 需要 配置深度监视
    watch(()=>person.subject, (newvalue, oldvalue) => {
      console.log("name的值改变了", newvalue, oldvalue);
    },{deep:true});


    return {
      mm,
      pp,
      person,
      changeStatus,
    };
  },
};
</script>
<style>
</style>